<template>
  <div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
    <!-- <div class="recommendPage">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide>I'm Slide 3</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div> -->
    <h3-scroll
      ref="scroll"
      :loadMore="loadMore"
      :pageSize="pageSize"
      v-if="isEmpty">
      <div>
        1
      </div>
    </h3-scroll>

  </div>
</template>
<script lang="ts">
import axios from 'axios';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { homeApi, mobileHome } from '@cloudpivot/api';
import mobile from '@cloudpivot/form/src/renderer/components/mobile';
import Common from '@cloudpivot/common/mobile';
import { H3Datetime } from 'h3-mobile-vue';
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import Swiper from 'swiper';
import  "swiper/swiper-bundle.css"


@Component({
  name: 'honor-list',
  components: {
    Empty: Common.components.Empty,
    H3Scroll: mobile.H3Scroll,
    H3Datetime,
  }
})
export default class HonorList extends Vue {



  pageSize: number = 20;

  page: number = 0;

  isEmpty: boolean = true;
  honorList: any = [];


  // swiperOption: {
  //       loop: true,
  //       autoplay: true,
  //       // 显示分页
  //       pagination: {
  //         el: ".swiper-pagination",
  //         clickable: true //允许分页点击跳转
  //       },
  //       // 设置点击箭头
  //       navigation: {
  //         nextEl: ".swiper-button-next",
  //         prevEl: ".swiper-button-prev"
  //       }
  //     }

  //  get Swiper() {
  //     return this.$refs.mySwiper.Swiper;
  //   }
  
  // 参数
  get params() {
    return   {
      "filters": [
        {
          "propertyCode": "sequenceStatus",
          "propertyType": 0,
          "propertyValue": "PROCESSING;COMPLETED;CANCELED;DRAFT"
        }
      ],
      "mobile": true,
      "queryCode": "",
      "schemaCode": "reward1",
      "page": this.page,
      "size": this.pageSize
    }
  }


  loadMore(page: any, done: any) {
    console.log(page.num,'num')
    console.log(12111111111111111111)
    const vm: any = this;
    vm.page = page.num-1;

    if (vm.page === 1) {
      vm.honorList = [];
    }
    axios
      .post('/api/runtime/query/list', this.params)
      .then((res: any) => {
        if (!res.data.content) {
          return;
        }

        if (done) {
          done(vm.pageSize, res.total);
        }
        vm.honorList = vm.honorList.concat(res.data.content);
      

        if (!vm.honorList.length) {
          vm.isEmpty = false;
        }
      });
  },

initSwiper(){
    var mySwiper = new Swiper (".swiper-container",{
       slidesPerView:4,
        // observer:true,//修改swiper自己或子元素时，自动初始化swiper
    　　 observeParents:true,//修改swiper的父元素时，自动初始化swiper
        //使用分页器
        // paginationClickable :true,
    　　 pagination: {
        　　el: '.swiper-pagination',
    　　 },    
        navigation:{
          nextEl:'.swiper-button-next',
          prevEl:'.swiper-button-prev',
        }
 
    } )
} 

 mounted() {
    this.initSwiper()
  }


}
</script>
<style lang="less" scoped>

@import '~@cloudpivot/common/styles/mixins.less';
.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
  z-index: 2;
}
.item {
  background-color: #fff;
  position: relative;
  font-size: 15px;
  display: flex;
  padding-left: 10px;
  .px2rem(margin, @horizontal-padding-md);
  .px2rem(border-radius, @border-radius-lg);

  &__title {
    color: #333333;
    display: flex;
  }

  &__desc {
    // color: #999999;
    display: flex;
    .px2rem(margin-top, @horizontal-padding-sm);
    .item-desc-lable{
      font-weight: 600;
    }
  }

  &__center {
    flex-grow: 1;
    position: relative;
    .px2rem(margin, @horizontal-padding-lg);
    margin-left: 0;
  }

  &__status {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;

    /deep/img {
      width: 1.6rem !important;
      height: 1.28rem !important;
    }
  }
}

.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.16rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-bottom: 1px solid #e6ebf6;
  background-color: white;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
  .search-header-inner {
    position: absolute;
    right: 0.4rem;
    display: flex;
    line-height: 0.7rem;
    span {
      padding-right: 0.13333333rem;
      font-size: 0.4rem;
    }

    .icon {
      font-size: 10px;
    }
  }
}
.searchModal {
  z-index: 9;
  position: absolute;
  top: 1.16rem;
  bottom: 44px;
  left: 0;
  right: 0;
  background: #fff;
  .searchRow {
    line-height: 30px;
    display: flex;
    font-size: 15px;
    position: relative;
    padding: 10px 15px;
    .searchTitle {
      color: #000;
      font-weight: 700;
      text-align: left;
      width: 100px;
    }
    .searchInput {
      border-width: 0;
      line-height: 30px;
      flex: 1 0;
      color: #333;
      font-size: 15px;
      -webkit-appearance: none;
      padding: 0;
      border: 0;
      background-color: transparent;
      overflow: visible;
      display: block;
      resize: none;
      word-break: break-all;
      word-wrap: break-word;
      font-family: Avenir, Helvetica, Arial, sans-serif;
    }
    &:after {
      content: '';
      position: absolute;
      background-color: #999999;
      display: block;
      z-index: 1;
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
.form-actions {
  text-align: center;
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-around;
  color: @primary-color;
  background-color: #fff;
  .px2rem(font-size, @font-size-base);
  height: 44px;
  &__item {
    flex-grow: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &:not(:last-child) > div {
      width: 100%;
      position: relative;

      &::after {
        content: '';
        height: @font-size-20;
        width: 1px;
        background: #eeeeee;
        position: absolute;
        right: 0;
      }
    }

    i {
      margin-right: 8px;
    }
  }
}
.swiperOne{
  width:100px;
  height:200px;
  .swiper-swiper{
    width: 100%;
    height: 100%;
    background: pink;
  }
}

.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 200px;
  background: pink;
}  
.recommendPage .swiper-container .swiper-slide{
  width: 100%;
  line-height: 200px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>
